<template>
  <div class="simple-drawer">
    <el-drawer
        v-model="header.isDrawer"
        :direction="direction"
        size=400px
        :open-delay=150
        class="glass glass-light"
    >
      <template #header>
        <span class="font-bold text-2xl text-gray-500">系统设置</span>
      </template>
      <template #default>
        <!-- 主题风格 -->
        <el-divider>主题风格</el-divider>
        <div class="flex justify-center items-center mb-10">
          <!-- 使用分段控制器实现主题风格切换 -->
          <el-segmented v-model="value" :options="options">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div class="flex">
                  <el-skeleton>
                    <template #template>
                      <div class="theme-wrap flex flex-col justify-start w-10 h-20 space-y-1">
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 40%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                      </div>
                    </template>
                  </el-skeleton>
                  <el-skeleton>
                    <template #template>
                      <div class="theme-wrap flex flex-col justify-around w-10 h-20">
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 40%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                <div>{{ item.name }}</div>
              </div>
            </template>
          </el-segmented>
        </div>

        <!-- 菜单风格 -->
        <el-divider>菜单风格</el-divider>
        <div class="flex justify-center items-center mb-10">
          <!-- 使用分段控制器实现主题风格切换 -->
          <el-segmented v-model="value1" :options="options1">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div class="flex">
                  <el-skeleton>
                    <template #template>
                      <div class="theme-wrap flex flex-col justify-start w-10 h-20 space-y-1">
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 40%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                      </div>
                    </template>
                  </el-skeleton>
                  <el-skeleton>
                    <template #template>
                      <div class="theme-wrap flex flex-col justify-around w-10 h-20">
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 40%; height: 5px" />
                        <el-skeleton-item variant="text" style="width: 70%; height: 5px" />
                      </div>
                    </template>
                  </el-skeleton>
                </div>
              </div>
            </template>
          </el-segmented>
        </div>

        <!-- 系统主题色 -->
        <el-divider>系统主题色</el-divider>
        <div class="flex flex-col items-center space-y-8">
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">侧边栏宽度</span>
          </div>
        </div>

        <!-- 盒子样式 -->
        <el-divider>盒子样式</el-divider>
        <div class="flex flex-col items-center space-y-8">
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">侧边栏宽度</span>
          </div>
        </div>

        <!-- 基础配置 -->
        <el-divider>基础配置</el-divider>
        <div class="flex flex-col space-y-8">
          <!-- 显示侧边栏LOGO -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">显示侧边栏LOGO</span>
            <el-switch v-model="aside.showLogo" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 开启多标签页 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">开启多标签页</span>
            <el-switch v-model="header.showTagsView" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 显示主体内边距 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">显示主体内边距</span>
            <el-switch v-model="main.showPadding" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 显示页脚 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">显示页脚</span>
            <el-switch v-model="footer.showFooter" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 高级材质 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">高级材质</span>
            <el-switch v-model="theme.showGlass" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 是否圆角 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">是否圆角</span>
            <el-switch v-model="theme.showBorderRadius" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
          <!-- 是否阴影 -->
          <div class="flex justify-between items-center w-full h-10">
            <span class="text-gray-500">是否阴影</span>
            <el-switch v-model="theme.showShadow" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { DrawerProps } from 'element-plus'
import {useLayouts} from "@/stores/modules/layouts.ts";
import {MenuThemeList, SystemThemeEnum, SystemThemeList} from "@/types/setting.ts";
import {Apple, Cherry, Grape, Orange, Pear, Watermelon} from "@element-plus/icons-vue";

const direction = ref<DrawerProps['direction']>('rtl')

const value = ref(SystemThemeEnum.LIGHT)
const options = [
  {
    name: '浅色',
    value: SystemThemeEnum.LIGHT,
  },
  {
    name: '深色',
    value: SystemThemeEnum.DARK,
  },
  {
    name: '跟随系统',
    value: SystemThemeEnum.AUTO,
  }
]

const value1 = ref(SystemThemeEnum.LIGHT)
const options1 = [
  {
    name: '浅色',
    value: SystemThemeEnum.LIGHT,
  },
  {
    name: '深色',
    value: SystemThemeEnum.DARK,
  },
  {
    name: '跟随系统',
    value: SystemThemeEnum.AUTO,
  }
]

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { aside, header, main, footer, theme } = storeToRefs(layouts)


watch(() => header.value.isDrawer, (newValue) => {
  if (newValue) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = 'auto'
  }
})

</script>

<style scoped lang="scss">
.el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}

.el-skeleton {
  width: auto;
}

.theme-wrap {
  position: relative;
  box-sizing: border-box;
  display: flex;
  height: 50px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.1s;
}




// 覆盖 element-plus 组件 el-drawer 默认的背景色和边框样式
:deep(.el-drawer) {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
  -webkit-box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
  color: rgb(128, 128, 128);
}

// 覆盖 element-plus 组件 el-drawer 默认的头部样式
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px;
}

// 覆盖 element-plus 组件 el-drawer 默认的遮罩层样式
:deep( .el-overlay) {
  background-color: transparent; /* 不设置背景色 */
}

.el-drawer {
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
  --tw-backdrop-blur: blur(30px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
</style>